import React from 'react'
import { Table, Input, Card, Tag, Button } from 'antd'

const { Search } = Input

import './index.less'

const TransactionList = ({ history }) => {
  const statusEnum = {
    success: {
      label: '成功',
      color: 'success',
    },
    fail: {
      label: '失败',
      color: 'error',
    },
  }
  const dataSource = [
    {
      blockNum: 1,
      hash: '0x64dc5acba24d6f6eff6781ac4fecec79c091ad02',
      txCount: 9,
      createdAt: '2016-09-21  07:50',
      type: 'config',
      status: 'success',
    },
    {
      blockNum: 2,
      hash: '0x64dc5acba24d6f6eff6781ac4fecec79c091ad03',
      txCount: 10,
      createdAt: '2016-09-21  08:50',
      type: 'config',
      status: 'fail',
    },
  ]

  const columns = [
    {
      title: '交易哈希',
      dataIndex: 'hash',
      key: 'hash',
    },
    {
      title: '区块编号',
      dataIndex: 'blockNum',
      key: 'blockNum',
    },
    {
      title: '交易时间',
      dataIndex: 'createdAt',
      key: 'createdAt',
    },
    {
      title: '交易数',
      dataIndex: 'txCount',
      key: 'txCount',
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      // eslint-disable-next-line react/display-name
      render: (text) => <Tag color={statusEnum[text].color}>{statusEnum[text].label}</Tag>,
    },
    {
      title: '操作',
      dataIndex: '',
      key: 'action',
      // eslint-disable-next-line react/display-name
      render: (_, row) => <Button type="link" onClick={() => history.push({
        pathname: `/dashboard/cross-chain/txInfo/${row.hash}`,
      })}>详情</Button>,
    },
  ]
  return (
    <Card>
      <div className="search">
        <Search className="search" placeholder="输入区块编号" style={{ width: 200 }} />
      </div>
      <Table
        dataSource={dataSource}
        columns={columns}
        rowKey="hash"
        pagination={{ position: ['bottomCenter'], showTotal: (total, range) => `共 ${total} 条记录 第 ${range[0]}-${range[1]} 项`, showSizeChanger: true, showQuickJumper: true }} />
    </Card>
  )
}

export default TransactionList
